<template>
	<view class="login-container">
		<image src="../../static/images/1.png" class="background-image"></image>
		<view v-if="showAgreement" class="agreement-modal">
			<p>温馨提示</p>
			<p>
				为了帮助您安全使用产品和服务，在您同意并授权基础上，我们可能会收集您的交易信息、位置信息、设备信息等。请您认真阅读
				<navigator url="/pages/agreement/agreement" class="link">《用户服务协议》</navigator>及
				<navigator url="/pages/privacy/privacy" class="link">《隐私政策》</navigator>的全部条款。您同意并接受全部条款后，再开始使用我们的服务。
			</p>
			<button @click="agree">同意并继续</button>
			<button @click="disagree">不同意</button>
		</view>
		<view v-else>
			<p class="login-text">请验证登录，未注册的手机号会自动为您注册</p>
			<view class="phone-input-container">
				<text>+86</text>
				<input type="text" v-model="phoneNumber" placeholder="请输入手机号" class="input-field" />
			</view>
			<view v-if="showVerificationInput" class="verification-input-container">
				<input type="text" v-model="verificationCode" placeholder="请输入验证码" class="input-field" />
			</view>
			<view class="button-container">
				<button class="verification-button" @click="getVerificationCode" :disabled="isCountingDown">
					{{ isCountingDown ? `重新获取(${countdown}s)` : '获取验证码' }}
				</button>
				<button class="immediate-login-button" @click="immediateLogin">立即登录</button>
				<button class="password-login-button" @click="passwordLogin">账号密码登录</button>
			</view>
			<p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				phoneNumber: '',
				verificationCode: '',
				showAgreement: true,
				showVerificationInput: false,
				errorMessage: '',
				countdown: 0,
				isCountingDown: false
			}
		},
		methods: {
			agree() {
				this.showAgreement = false;
			},
			disagree() {
				alert('您需要同意协议才能继续使用服务');
			},
			getVerificationCode() {
				if (!this.phoneNumber) {
					this.errorMessage = '请输入有效的手机号';
					return;
				}
				this.showVerificationInput = true;
				this.startCountdown();
				// 调用API获取验证码
				// 使用wx.request发送GET请求
				wx.request({
					url: `http://127.0.0.1:9999/user-server/user/getCode/${this.phoneNumber}`,
					method: 'GET',
					success: (res) => {
						// 处理成功响应
						console.log('验证码已发送', res.data);
					},
					fail: (err) => {
						// 处理错误响应
						this.errorMessage = '发送验证码失败，请重试';
						console.error('Error:', err);
					}
				});

			},
			startCountdown() {
				this.countdown = 60;
				this.isCountingDown = true;
				const interval = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
					} else {
						clearInterval(interval);
						this.isCountingDown = false;
					}
				}, 1000);
			},
			immediateLogin() {
				if (!this.phoneNumber || !this.verificationCode) {
					this.errorMessage = '请输入手机号和验证码';
					return;
				}
				wx.request({
					url: 'http://127.0.0.1:8400/user/codeLoginApp',
					method: 'POST',
					data: {
						accountName: this.phoneNumber,
						code: this.verificationCode
					},
					success: (res) => {
						console.log('API响应:', res.data);
						if (res.data.code === 200) {
							console.log('登录成功，准备跳转');
							wx.setStorageSync('phoneNumber', this.phoneNumber); // 存储手机号码
							uni.navigateTo({
								url: '/pages/home/OwnerHome',
								success: function() {
									console.log('跳转成功');
								},
								fail: function(err) {
									console.error('跳转失败', err);
								}
							});
						} else {
							this.errorMessage = res.data.message || '登录失败，请重试';
						}
					},
					fail: (err) => {
						this.errorMessage = '请求失败，请检查网络连接';
						console.error('Error:', err);
					}
				});
			},
			passwordLogin() {
				uni.navigateTo({
					url: '/pages/passwordLogin/passwordLogin'
				});
				// 调用API进行登录
			},
			socialLogin() {
				// 调用社交媒体登录API
			}
		}
	}
</script>

<style>
	.login-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100vh;
		background-size: cover;
		background-position: center;
		padding: 20px;
	}

	.background-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		z-index: -1;
	}

	.phone-input-container {
		display: flex;
		align-items: center;
		margin: 20px 0;
		padding: 10px;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 10px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.verification-input-container {
		margin-top: 10px;
		width: 70%;
		padding: 10px;
		background-color: rgba(255, 255, 255, 0.8);
		border-radius: 10px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.input-field {
		flex: 1;
		margin-left: 10px;
		padding: 10px;
		border: none;
		border-radius: 5px;
		background-color: transparent;
		font-size: 16px;
		box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
		transition: border-color 0.3s;
	}

	.input-field:focus {
		border-color: #007bff;
		outline: none;
	}

	.button-container {
		text-align: center;
		margin-top: 10px;
	}

	.verification-button,
	.immediate-login-button,
	.password-login-button {
		width: 70%;
		padding: 8px;
		margin: 8px 0;
		border-radius: 20px;
		font-size: 14px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		display: inline-block;
	}

	.verification-button {
		background-color: #007bff;
		color: white;
	}

	.verification-button:disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}

	.immediate-login-button {
		background-color: #28a745;
		color: white;
	}

	.password-login-button {
		background-color: #ccc;
		color: #666;
	}

	.error-message {
		color: red;
		margin-top: 10px;
		font-size: 14px;
	}

	.agreement-modal {
		background-color: white;
		padding: 30px;
		border-radius: 15px;
		box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
		text-align: left;
		width: 80%;
		max-width: 400px;
	}

	.agreement-modal p {
		font-size: 14px;
		line-height: 1.5;
		text-align: left;
		word-break: break-word;
	}

	.link {
		color: blue;
		text-decoration: underline;
	}

	button {
		padding: 10px 20px;
		margin: 10px;
		font-size: 16px;
		border-radius: 5px;
		background-color: #007bff;
		color: white;
		border: none;
		cursor: pointer;
	}

	button:hover {
		background-color: #0056b3;
	}

	.error-message {
		color: red;
		margin-top: 10px;
	}
</style>